<template>
	<view class="userinfo">
		<u-navbar :is-back="false" immersive="" :border-bottom="false" :background="{background: 'transparent'}">
			<view class="navbar-wrap">
				<view class="left">
					<u-icon name="arrow-left" size="32" @click="back"></u-icon>
				</view>
				<view class="right">
					<view class="distance">
						{{userinfo.distance}}·{{userinfo.is_online!=0 && userinfo.last_login_datetime!='保密' ? '在线' : ''}}
					</view>
					<view name="more-dot-fill" size="32" @click="optionsshow = true">举报</view>
				</view>
			</view>
		</u-navbar>
		<view class="top-wrap">
			<image class="headbg" mode="aspectFill" :src="userinfo.head_300 | formatImage"></image>
			<!-- <image class="avatar" v-if="userinfo.head_300" :src="userinfo.head_300 | formatImage" @error="headerror"
				mode="aspectFill" @click="showavatar"></image> -->
			<!-- <image class="avatar" src="/static/touxiang.png" v-else mode=""></image> -->
			<view class="name">{{userinfo.name}}</view>
			<view class="imgtags" v-if="userinfo.sex=='女'">
				<image src="/static/real.png" v-if="userinfo.is_identity_authentication==2" mode="heightFix"></image>
				<image src="/static/norz.png" v-else mode="heightFix"></image>
			</view>
			<view class="tags">
				<view class="tag info">{{userinfo.city}}</view>
				<view class="tag info">{{userinfo.age}}岁 · {{userinfo.constellation}}</view>
				<view class="tag info">{{userinfo.occupation}}</view>
			</view>
			<view class="description">{{userinfo.self_slogan}}</view>
		</view>
		<!-- <view class="wx">
			<image src="../../static/getwx.png" mode="widthFix" @click="jswx"></image>
		</view> -->
		<u-cell-item class="whitecolor" hover-class="none" :border-bottom="false" title="动态" @click="tadymanic">
		</u-cell-item>
		<view class="photos" v-if="imgList.length != 0">
			<view class="head">相册</view>
			<view class="photolist" v-if="!(userinfo.img_auth == '1' && !(userinfo.state == 2 || userinfo.state == 3))">
				<view class="photo" v-for="(picitem,index) in imgList" @click="preimage(index)" :class="[picitem.burn==1||picitem.packet!='0.00'?'hots':'',picitem.see==1 ? 'yiyue' : '']">
					<image v-if="picitem.types==1" class="pic "
						:class="picitem.burn==1||picitem.packet!='0.00'?'blur':''" :src="picitem.picthumb[0] | formatImage"
						mode="aspectFill"></image>
					<image v-if="picitem.types==2" class="pic "
						:class="picitem.burn==1||picitem.packet!='0.00'?'blur':''" :src="picitem.cover | formatImage"
						mode="aspectFill"></image>
					<image class="hot" v-if="picitem.burn==1 && picitem.see==1" src="../../static/yifen.png"></image>
					<image class="hot" v-else-if="picitem.burn==1" src="../../static/fen.png"></image>
					<image class="hot" v-if="picitem.packet!='0.00'" src="../../static/hb.png"></image>
					<text class="benren" v-if="picitem.is_auth ==1">本人</text>
					<view class="tips" v-if="picitem.type == 1 && picitem.burn == 1 && Number(picitem.packet) > 0">
						阅后即焚红包<text v-if="picitem.types == 1">照片</text><text v-if="picitem.types == 2">视频</text></view>
					<view class="tips" v-if="picitem.type == 1 && picitem.burn == 1 && Number(picitem.packet) == 0">阅后即焚
					</view>
					<view class="tips" v-if="picitem.burn == 0 && Number(picitem.packet) > 0">红包<text
							v-if="picitem.types == 1">照片</text><text v-if="picitem.types == 2">视频</text></view>
					<view class="tips" v-if="picitem.type == 0">已焚毁</view>
					<view class="play flex-c" v-if="picitem.types==2">
						<u-icon size="60" color="#fff" name="play-circle-fill"></u-icon>
					</view>
				</view>
			</view>
			<view class="flex-c flex-col"
				v-if="userinfo.img_auth == '1' && imgList.length != 0 && !(userinfo.state == 2 || userinfo.state == 3)"
				style="border-radius:10rpx;background-color: rgba(255,255,255,0.1);padding: 40rpx 0;margin: 0 30rpx;">
				<image style="width: 30%;" mode="widthFix" src="/static/room.png"></image>
				<view style="color:#fff;padding: 40rpx 0;">该用户设置了付费相册</view>
				<u-button size="mini" @click="authimg">解锁相册（{{ userinfo.photo_price || '0'}}币），会员免费</u-button>
			</view>
		</view>
		<view class="cellinfo">
			<view class="tab">了解Ta</view>
			<view class="ul">
				<view class="infoitem">
					<view class="label">身高</view>
					<view class="value">{{ userinfo.stature==='未设置' || userinfo.stature===''?'未设置':userinfo.stature+'cm' }}</view>
				</view>
				<view class="infoitem">
					<view class="label">体重</view>
					<view class="value">{{ userinfo.weight==='未设置' || userinfo.weight===''?'未设置':userinfo.weight+'kg'}}</view>
				</view>
				<view class="infoitem" v-if="userinfo.offten_city">
					<view class="label">常住城市</view>
					<view class="value">{{userinfo.offten_city}}</view>
				</view>
			</view>
			<view class="xingqu" v-if="userinfo.dy_program && userinfo.dy_program[0]">
				<view class="label">交友节目</view>
				<view class="value">
					<view class="item" v-for="(item, index) in userinfo.dy_program">{{item}}</view>
				</view>
			</view>
			<view class="xingqu" v-if="userinfo.dy_conditions && userinfo.dy_conditions[0]">
				<view class="label">期望对象</view>
				<view class="value">
					<view class="item" v-for="(item, index) in userinfo.dy_conditions">{{item}}</view>
				</view>
			</view>
		</view>
		<view class="pingjia">
			<view class="flex-bt">
				<view class="tab flex-bt">评价 {{userinfo.pingjia_count}}
					<view>综合评分 {{score}}</view>
				</view>
				<view class="pj-btn" @click="discussshow = true">评价Ta</view>
			</view>
			<view class="list">
				<view class="items" v-for="(item, index) in dislist">
					<view class="name">{{item.content}}</view>
					<view class="star-wrap">
						<view class="no-star flex">
							<i class="noscore" :class="{'half-score': item.num>0, 'score': item.num>0.5}"></i>
							<i class="noscore" :class="{'half-score': item.num>1, 'score': item.num>1.5}"></i>
							<i class="noscore" :class="{'half-score': item.num>2, 'score': item.num>2.5}"></i>
							<i class="noscore" :class="{'half-score': item.num>3, 'score': item.num>3.5}"></i>
							<i class="noscore" :class="{'half-score': item.num>4, 'score': item.num>4.5}"></i>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view name="more-dot-fill" size="32" @click="optionsshow = true" style="color: white;text-align:center">微信不存在点击举报</view>
		<view class="tip">请勿通过平台进行不法交易，如被举报核实将作封号处理</view>
		<view class="footer">
			<image mode="heightFix" src="/static/ic_user_frg_chat.png" @click="openChat" />
			<image mode="heightFix" src="/static/ic_user_frg_dislike.png" v-if="userinfo.love==1" @click="guanzhu" />
			<image mode="heightFix" src="/static/ic_user_frg_like.png" v-else @click="guanzhu" />
		</view>
		<u-action-sheet :list="optionslist" @click="optionclick" v-model="optionsshow"></u-action-sheet>
		<u-toast ref="uToast" />
		<u-mask :show="discussshow" @click="discussshow = false">
			<view class="discuss">
				<view class="rect" @tap.stop>
					<view class="hd">
						<image @click="discussshow = false" src="../../static/x.png" class="close_img" />
					</view>
					<view class="ping-wrap">
						<view class="list" v-for="(item, index) in pjlist">
							<text class="name">{{item.content}}</text>
							<view class="star-wrap" id="star-wrap">
								<view class="no-star flex" @touchstart="touchmoveF($event, index)"
									@touchmove="touchmoveF($event, index)">
									<i class="noscore" :class="{'half-score': item.num>0, 'score': item.num>0.5}"></i>
									<i class="noscore" :class="{'half-score': item.num>1, 'score': item.num>1.5}"></i>
									<i class="noscore" :class="{'half-score': item.num>2, 'score': item.num>2.5}"></i>
									<i class="noscore" :class="{'half-score': item.num>3, 'score': item.num>3.5}"></i>
									<i class="noscore" :class="{'half-score': item.num>4, 'score': item.num>4.5}"></i>
								</view>
							</view>
						</view>
					</view>
					<view class="ft">
						<view @click="sendPj" class="nmpj">匿名评价</view>
						<view class="ju_bao" @click="jubao">严重问题请举报</view>
					</view>
				</view>
			</view>
		</u-mask>
		<u-modal v-model="laheimodel" @confirm="laheiconfirm" ref="uModal" :async-close="true" show-cancel-button
			content="拉黑后你们将无法看到对方和对方的动态，确定吗？"></u-modal>
		<chat-modal :wxmodal="wxmodal" @modalclose="wxmodal = false" :userinfo="userinfo"></chat-modal>
		<u-action-sheet :list="picops" :tips="tips" @click="picopsclick" v-model="picshow"></u-action-sheet>
	</view>
</template>

<script>
	import chatModal from '@/components/chatmodal.vue'
	export default {
		components:{
			chatModal
		},
		data() {
			return {
				tips: {
					text: '解锁该用户的付费相册',
					color: '#787878',
					fontSize: 24
				},
				picshow: false,
				picops: [{
					text: '付费查看'
				}, {
					text: '购买会员'
				}],
				wxmodal: false,
				HOSTURL: this.$HOSTURL,
				guanzhued: false,
				dislist: [],
				laheimodel: false,
				discussshow: false,
				optionsshow: false,
				optionslist: [{
					text: '拉黑(屏蔽双方)',
				}, {
					text: '匿名举报'
				}],
				uid: 0,
				userinfo: {},
				imgList: [],
				pjlist: [],
				left: 0,
				score: 0
			}
		},
		onLoad(options) {
			this.uid = options.id
			this.getuservip()
		},
		// #ifdef MP
		onShareAppMessage() {
			const url = '/pages/index/index?share_id='+this.$store.state.userid
		    return {
		        title: this.$store.state.userinfo.name + "邀您来这里一起真实相约吧！",
		        path: url,
		        params: {},
				success(res){
				    uni.showToast({
				         title:'分享成功',
				        })
						console.log(url)
				    },
					
				fail(res){
				     uni.showToast({
				        title:'分享失败',
				        icon:'none'
						})
				}
				
		    };
		},
		// #endif
		watch: {
			discussshow(newval, oldval) {
				var _this = this
				if (newval) {
					setTimeout(function() {
						//document.querySelector('#star-wrap').offsetLeft;
						const query = uni.createSelectorQuery().in(_this);
						query.select('#star-wrap').boundingClientRect(data => {
							_this.left = data.left
						}).exec();
					}, 500)
				}
			}
		},
		onShow() {
			if (!this.$store.state.hasLogin) {
				uni.redirectTo({
					url: '/pages/appview/index'
				})
			}
			
			if(this.userinfo.id){
				this.getuserpiclist()
			}
		},
		methods: {
			showavatar(){
				uni.previewImage({
					urls:[this.$HOSTURL + this.userinfo.head_300]
				})
			},
			openChat() {
				this.$judgeQx(this.uid, () => {
					this.userinfo.link = 1;
					uni.navigateTo({
						url: '/pages/message/index?toid=' + this.uid + '&name=' + this.userinfo.name
					})
				}, 1)
			},
			jswx() {
				var _this = this
				this.$judgeQx(this.uid, function() {
					_this.userinfo.link = 1;
					if (!_this.userinfo.qq && !_this.userinfo.wxcount) {
						uni.showModal({
							title: '提示',
							content: '对方未填写微信或qq，但你可在平台联系对方',
							confirmText: '私聊下',
							success(res) {
								if (res.confirm) {
									uni.navigateTo({
										url: '/pages/message/index'
									})
								}
							}
						})
					} else {
						_this.wxmodal = true
					}
				})
			},
			headerror(e) {
				this.userinfo.head_300 = '/static/touxiang.png'
			},
			async getuservip() {
				const {
					data: res
				} = await this.$Request({
					url: 'apis/home/user/vipinfo',
					data: {
						user_id: this.$store.state.userid,
						touserid: this.uid
					}
				})
				if (res && res.code == 200) {
					this.getuserinfo()
				} else {
					uni.showModal({
						content: res.msg,
						showCancel: false,
						success(res) {
							if (res.confirm) {
								if (res && res.code == 201) {
									uni.redirectTo({
										url: '/pages/renzheng/index'
									})
								} else if (res && res.code == 202) {
									uni.redirectTo({
										url: '/pages/member/index'
									})
								} else {
									uni.navigateBack()
								}
							}
						}
					})
				}
			},
			back() {
				uni.navigateBack()
			},
			tadymanic() {
				uni.navigateTo({
					url: '/pages/tadymanic/index?id=' + this.uid
				})
			},
			async getuserinfo() {
				const {
					data: res
				} = await this.$Request({
					url: 'api/user/info',
					data: {
						longitude: this.$store.state.longitude,
						latitude: this.$store.state.latitude,
						user_id: this.uid,
						to_user: this.$store.state.userid
					}
				})
				if (res.result.pull_black == 1) {
					uni.showModal({
						content: '对方已拉黑您',
						showCancel: false,
						success(res) {
							if (res.confirm) {
								uni.navigateBack()
							}
						}
					})
					return;
				}
				if (res.result.sex == this.$store.state.sex) {
					uni.showModal({
						content: '保护用户隐私，不能查看同性的详细信息',
						showCancel: false,
						success(res) {
							if (res.confirm) {
								uni.navigateBack()
							}
						}
					})
					return;
				}
				this.userinfo = res.result
				this.getuserpiclist()
				this.getevalist()
			},
			async getuserpiclist() {
				const {
					data: res
				} = await this.$Request({
					url: 'api/Userimg/lists',
					data: {
						user_id: this.uid,
						to_user: this.$store.state.userid
					}
				})
				if (res && res.code == 200) {
					var data = res.result;
					this.imgList = data;
					var arr = [];
					var num = 0;
					for (var i = 0, len = data.length; i < len; i++) {
						if (data[i].types == 1) {
							arr.push(data[i]);
							this.imgList[i].number = num;
							num++;
						}
					}
					this.imgArr = arr;
				}
			},
			async getevalist() {
				const {
					data: res
				} = await this.$Request({
					url: 'apis/Home/Dymanic/evalist',
					data: {
						main_id: this.uid
					}
				})
				if (res && res.code == 200) {
					this.dislist = res.data
					this.pjlist = JSON.parse(JSON.stringify(res.data))
					for (var i = 0, len = this.pjlist.length; i < len; i++) {
						this.pjlist[i].num = 5;
					}
					this.score = res.score;
				}
			},
			async guanzhu() {
				const {
					data: res
				} = await this.$Request({
					url: 'api/user/attention',
					data: {
						user_id: this.$store.state.userid,
						to_user: this.uid
					}
				})
				if (res.code == 200) {
					this.userinfo.love = !this.userinfo.love
					this.$refs.uToast.show({
						title: res.msg
					})
				}
			},
			optionclick(index) {
				console.log(`点击了第${index + 1}项，内容为：${this.optionslist[index].text}`)
				switch (index + 1) {
					case 1:
						this.laheimodel = true
						break;
					case 2:
						this.jubao()
						break;
				}
			},
			async sendPj() {
				var obj = {};
				for (var i = 0, len = this.pjlist.length; i < len; i++) {
					var num = Number(this.pjlist[i].num);
					obj[this.pjlist[i].id] = num.toFixed(1);
				}
				// 判断是否有评价权限
				const {
					data: res
				} = await this.$Request({
					url: 'apis/Home/Dymanic/checkeva',
					data: {
						user_id: this.$store.state.userid,
						main_id: this.uid,
					}
				})
				if (res && res.code == 200) {
					this.ping(obj)
				} else {
					this.$u.toast(res.msg);
				}
			},
			async ping(obj) {
				const {
					data: res
				} = await this.$Request({
					url: 'apis/Home/Dymanic/evaluate',
					data: {
						userid: this.$store.state.userid,
						main_id: this.uid,
						evaluate: JSON.stringify(obj), // {key:val}
					}
				})
				this.$u.toast(res.msg);
				if (res.code == 200) {
					this.discussshow = false
					this.getevalist()
				}
			},
			async laheiconfirm() {
				const {
					data: res
				} = await this.$Request({
					url: 'api/user/addBlackList',
					data: {
						user_id: this.$store.state.userid,
						to_user: this.uid
					}
				})
				this.laheimodel = false;
				if (res.code == 200) {
					this.$refs.uToast.show({
						title: res.msg
					})
				}
			},
			preimage(index) {
				uni.navigateTo({
					url: '/pages/preimage/index?index=' + index + '&userid=' + this.uid
				})
			},
			jubao() {
				uni.navigateTo({
					url: '/pages/jubao/index?uid=' + this.uid
				})
			},
			touchmoveF: function(event, index) {
				var e = event.currentTarget;
				var _this = this;
				var num = (event.changedTouches[0].pageX - _this.left) / 23;
				_this.pjlist[index].num = num;
			},
			async picopsclick(index) {
				if (index == 0) {
					const {
						data: res
					} = await this.$Request({
						url: 'apis/Home/User/authimg',
						data: {
							user_id: this.uid,
							to_user: this.$store.state.userid,
						}
					})
					if (res && res.code == 200) {
						this.userinfo.state = 2;
					} else {
						this.$u.toast(res.msg);
					}
				} else if (index == 1) {
					uni.navigateTo({
						url: '/pages/member/index'
					})
				}
			},
			async authimg() {
				const {
					data: ret
				} = await this.$Request({
					url: 'apis/home/user/vipimg',
					data: {
						user_id: this.$store.state.userid,
						to_user: this.uid
					}
				})
				if (ret.code == 200) {
					uni.showModal({
						title: '解锁该用户的付费相册',
						content: '今日您剩余' + ret.num + '次查看他人付费相册。解锁后，您可以永久免费查看该用户的相册。请确认操作',
						async success(res) {
							if (res.confirm) {
								const {
									data: resu
								} = await this.$Request({
									url: 'apis/home/user/Incxiang',
									data: {
										user_id: this.$store.state.userid,
										to_user: this.uid,
									}
								})
								if (resu && resu.code == 200) {
									this.userinfo.state = 2;
								} else {
									this.$u.toast(resu.msg);
								}
							}
						}
					})
				} else if (ret.code == 201) {
					uni.showModal({
						title: '提示',
						content: '您还未认证，请先去认证',
						success(res) {
							if (res.confirm) {
								uni.redirectTo({
									url: '/pages/renzheng/index'
								})
							}
						}
					})
				} else if (ret.code == 202) {
					this.picops[0].text = '付费查看' + this.userinfo.photo_price + '币'
					this.picshow = true
				} else if (ret.code == 204) {
					uni.showModal({
						title: '解锁该用户的付费相册',
						content: '您今日免费查看他人付费相册次数已用完，但你可以付费查看~解锁后，您可以永久免费查看该用户的相册。请确认您的操作',
						confirmText: '付费查看' + this.userinfo.photo_price + '币',
						async success(res) {
							if (res.confirm) {
								const {
									data: result
								} = await this.$Request({
									url: 'apis/Home/User/authimg',
									data: {
										user_id: this.uid,
										to_user: this.$store.state.userid,
									}
								})
								if (result && result.code == 200) {
									this.userinfo.state = 2;
								} else {
									this.$u.toast(result.msg);
								}
							}
						}
					})
				} else if (ret.code == 205) {
					this.userinfo.img_auth = 0;
				} else {
					this.$u.toast(ret.msg);
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.whitecolor {
		color: rgb(199, 199, 199);
	}

	.star-wrap {
		flex: 1;

		.noscore {
			background-image: url('/static/ic_star_7.png');
			background-size: 100%;
			width: 22.5px;
			height: 15px;
			position: relative;
		}

		.half-score {
			background-image: url('/static/ic_star_3.png');
		}

		.score {
			background-image: url('/static/ic_star_8.png');
		}
	}

	.userinfo {
		background-color: #2A2931;

		.navbar-wrap {
			display: flex;
			align-items: center;
			width: 100%;
			padding: 0 30rpx;

			.left,
			.right {
				min-width: 50rpx;
				display: flex;
				align-items: center;
				color: #fff;
			}

			.right {
				justify-content: flex-end;

				.distance {
					background: linear-gradient(to right, #d9a14e, #b57e2c);
					border-radius: 30rpx;
					padding: 8rpx 20rpx;
					margin-right: 20rpx;
					font-size: 24rpx;
					color: #fff;
				}
			}
		}

		.top-wrap {
			margin-bottom: 20rpx;
			height: 100vw;
			overflow: hidden;
			position: relative;
			text-align: center;
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			align-items: center;

			image.avatar {
				width: 180rpx;
				height: 180rpx;
				border-radius: 90rpx;
				margin-bottom: 20rpx;
				z-index: 11;
			}

			image.headbg {
				position: absolute;
				top: -10px;
				left: -10px;
				overflow: hidden;
				width: calc(100% + 20px);
				height: calc(100% + 20px);
				// filter: blur(10px);
			}

			.name {
				color: #fff;
				z-index: 111;
			}

			.imgtags {
				display: flex;
				align-items: center;
				margin: 14rpx 0;

				image {
					width: 121rpx;
					height: 36rpx;
					margin: 0 4rpx;
				}
			}

			.tags {
				z-index: 1;
				margin-top: 12rpx;

				.tag {
					display: inline-block;
					padding: 6rpx 12rpx;
					margin: 0rpx 12rpx 12rpx 0rpx;
					border-radius: 8rpx;
					color: rgb(168, 123, 56);
					background: rgb(42, 41, 49);
				}
			}

			.description {
				z-index: 1;
				margin-top: 10rpx;
				margin-bottom: 60rpx;
				width: 80%;
				word-break: break-all;
			}

			.renzheng {
				.item {
					margin-top: 10rpx;
					display: flex;
					justify-content: center;
					align-items: center;

					image {
						width: 72rpx;
						height: 42rpx;
					}
				}
			}

		}

		.wx {
			image {
				width: 100%;
			}
		}

		.photos {
			margin: 20rpx 0;

			.head {
				padding: 20rpx 30rpx;
				color: rgb(199, 199, 199);
			}

			.photolist {
				padding: 20rpx 30rpx;
				display: flex;
				flex-wrap: wrap;

				.photo {
					position: relative;
					margin-right: 13rpx;
					margin-bottom: 13rpx;
					border-radius: 20rpx;
					overflow: hidden;
					width: calc((100vw - 60rpx - 13rpx) / 4 - 8rpx);
					height: calc((100vw - 60rpx - 13rpx) / 4 - 8rpx);

					&:nth-child(4n + 4) {
						margin-right: 0rpx;
					}

					&.hots {
						border: 4rpx solid #e74c3c;
					}

					&.yiyue {
						border: 4rpx solid #aaa;
					}

					.pic {
						width: 100%;
						height: 100%;

						&.blur {
							filter: blur(8px);
						}
					}

					.hot {
						position: absolute;
						left: 0;
						top: 0;
						width: 40rpx;
						height: 40rpx;
					}

					.benren {
						position: absolute;
						top: 0;
						right: 0;
						color: #fff;
						background: #64567d;
						border-radius: 0 0 0 10px;
						padding: 2px 5px;
						font-size: 10px;
					}

					.tips {
						width: 100%;
						font-size: 20rpx;
						color: #e74c3c;
						position: absolute;
						bottom: 0;
						left: 0;
						text-align: center;
					}

					.play {
						width: 60rpx;
						height: 60rpx;
						background-color: rgba($color: #000000, $alpha: 0.6);
						position: absolute;
						top: calc(50% - 30rpx);
						left: calc(50% - 30rpx);
						border-radius: 50%;
					}
				}
			}
		}

		.cellinfo {
			.tab {
				padding: 20rpx;
				font-size: 28rpx;
				color: rgb(199, 199, 199);
				font-weight: bold;
			}

			.ul {
				display: flex;
				padding: 20rpx;
				flex-wrap: wrap;

				.infoitem {
					overflow: auto;
					width: 32%;
					max-width: 32%;
					box-sizing: border-box;
					min-width: 32%;
					display: flex;
					padding: 16rpx;
					flex-direction: column;
					justify-content: flex-start;
					margin-bottom: 5vw;
					margin-right: 2%;
					background-color: rgba(255, 255, 255, 0.1);
					border-radius: 12rpx;

					&:nth-child(3n+3) {
						margin-right: 0;
					}

					.label {
						display: block;
						width: 100%;
						color: rgb(150, 150, 150);
						font-size: 10px;
					}

					.value {
						display: block;
						width: 100%;
						color: rgb(230, 230, 230);
						margin-top: 10px;
						font-size: 12px;
					}
				}

			}

			.xingqu {
				padding: 20rpx;
				font-size: 28rpx;

				.label {
					color: rgb(199, 199, 199);
					font-weight: bold;
				}

				.value {
					display: flex;
					flex-direction: row;
					flex-wrap: wrap;
					width: 100%;

					.item {
						margin-right: 12px;
						background-color: rgba(255, 255, 255, 0.1);
						border-radius: 20px;
						padding: 10px;
						font-size: 12px;
						margin-top: 10px;
						color: rgb(230, 230, 230);
					}
				}
			}
		}

		.pingjia {
			.tab {
				padding: 10rpx 30rpx;
				color: rgb(199, 199, 199);

				view {
					color: rgb(168, 123, 56);
					margin-left: 20rpx;
				}
			}

			.list {
				padding: 10px;
				display: flex;
				flex-wrap: wrap;

				.items {
					margin-right: 12px;
					margin-bottom: 10px;
					color: #fff;
					font-size: 12px;
					border-radius: 6px;
					padding: 6px 10px;
					box-sizing: border-box;
					width: calc((100% - 12px) / 2);
					display: flex;
					align-items: center;
					justify-content: space-between;
					background: #000;

					.name {
						margin-right: 20rpx;
					}

					&:nth-child(2n) {
						margin-right: 0;
					}
				}
			}

			.pj-btn {
				margin-right: 20rpx;
				background: linear-gradient(to right, #d9a14e, #b57e2c);
				color: #fff;
				font-size: 20rpx;
				padding: 0rpx 20rpx;
				display: flex;
				align-items: center;
				border-radius: 30rpx;
			}
		}

		.tip {
			font-size: 24rpx;
			text-align: center;
			padding: 30rpx 30rpx 240rpx 30rpx;
			color: rgb(199, 199, 199);
		}

		.footer {
			position: fixed;
			bottom: 40px;
			width: 80%;
			left: 10%;
			display: flex;
			justify-content: space-between;

			image {
				height: 3em;
			}
		}

		.discuss {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100%;

			.rect {
				width: 70%;
				border-radius: 20rpx;
				padding: 0 30rpx;
				// height: 120px;
				background: linear-gradient(45deg, #d9a14e, #b57e2c);

				.hd {
					position: relative;
					text-align: center;
					font-weight: bold;
					height: 80rpx;
					font-size: 28rpx;

					.close_img {
						width: 18px;
						height: 18px;
						position: absolute;
						top: 10px;
						right: 10px;
					}
				}

				.ping-wrap {
					max-height: 50vh;
					overflow-y: auto;

					.list {
						display: flex;
						align-items: center;
						background: #000;
						border-radius: 3px;
						padding: 5px;
						margin-bottom: 7px;

						.name {
							margin-right: 10px;
							font-size: 14px;
							width: 50px;
							color: rgb(168, 123, 56);
						}
					}

				}

				.ft {
					padding: 16px 10px 14px;

					.nmpj {
						background: #000;
						color: #fff;
						text-align: center;
						line-height: 3;
						border-radius: 12rpx;
					}

					.ju_bao {
						font-size: 24rpx;
						color: rgb(168, 123, 56);
						padding-top: 28rpx;
						text-align: center;
					}
				}
			}
		}

	}
</style>
